<template>
	<div>
		<div class="items-box">
			<div class="label">章节：</div>
			<div class="value">
				<template v-if="chapterList.length">
					<div v-for="(item, index) in chapterList" :key="index">{{ item.title || item.chapterName }}</div>
				</template>
				<div v-else>- -</div>
			</div>
		</div>
		<div class="items-box">
			<div class="label">知识点：</div>
			<div class="value">
				<template v-if="knowledgeList.length">
					<div v-for="(item, index) in knowledgeList" :key="index">{{ item.knowledgeName }}</div>
				</template>
				<div v-else>- -</div>
			</div>
		</div>
		<div class="items-box">
			<div class="label">研发人：</div>
			<div class="value">{{ developerName || '- -' }}</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 章节列表
			chapterList: {
				type: Array,
				default: () => []
			},
			// 知识点列表
			knowledgeList: {
				type: Array,
				default: () => []
			},
			// 研发人名称
			developerName: {
				type: String,
				default: ""
			}
		}
	};
</script>

<style lang="less" scoped>
	.items-box {
		margin-bottom: 5px;
		line-height: 1.5;
		font-size: 14px;
		color: #666;
		display: flex;

		.label {
			width: 60px;
			margin-right: 5px;
			text-align: right;
			flex-shrink: 0;
		}

		.value {
			color: #535766;
			font-weight: bold;
		}
	}
</style>
